<template>
    <div class="flex_aj column">
        <div><i class="el-icon-star-on"></i>基础信息</div>
        <div class="box">
            <r-list :ColsNum="2" :width="120" :ListCols="ListCols" ListType="Info" :ListData="ListData"></r-list>
        </div>
        <div class="mt20">
            <el-button v-if="ListData.state==1" @click="open" type="success" class="">处理</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //基础信息
            ListCols: [
                [
                    {
                        label: '工单编号',
                        prop: 'id',
                    },
                    {
                        label: '处理结果',
                        prop: 'state',
                        formatter: e => e.state == 1 ? '待处理' : e.state == 2 ? '已处理' : ''
                    },
                    {
                        label: '设备编号',
                        prop: 'equipmentNo',
                    },
                    {
                        label: '所属代理商',
                        prop: 'regionalName',
                    },
                    {
                        label: '所属商家',
                        prop: 'merchantName',
                    },
                    {
                        label: '设备地址',
                        prop: 'address',
                    },
                    {
                        label: '报障人',
                        prop: 'nickName',
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                    },
                    {
                        label: '反馈内容',
                        prop: 'remark',
                    },
                    {
                        label: '反馈图片',
                        prop: 'pic',
                        type: 'img',
                        imglook: true
                    },
                    {
                        label: '运维人员',
                        prop: 'name',
                    },
                    {
                        label: '处理时间',
                        prop: 'repairTime',
                    },
                    {
                        label: '处理人',
                        prop: 'name',
                    },
                    {
                        label: '运维处理备注',
                        prop: 'handleRemark',
                    },
                ]
            ],
            ListData: {
            },

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.api.errinfo({
                id: this.$route.query.id
            })
            if (res) {
                let param = {
                    regionalName: res.data.device.regionalName,
                    merchantName: res.data.device.merchantName,
                    address: res.data.device.address
                }
                console.log(res.data.device);
                this.ListData = { ...res.data.faultOrder, ...param }
                this.ListData.pic = res.data.faultOrder.picture.split(',')
            }

        },
        open() {
            this.$confirm('是否确认已处理完毕?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.api.puterr({ id: this.ListData.id })
                if (res) {
                    this.$message({
                        type: 'success',
                        message: '反馈成功!'
                    });
                    this.init()
                }

            })
        }

    }
};
</script>
<style scoped lang='scss'>
.box {
  width: 80%;
  margin: 0 auto;
}
</style>